<template>
  <div v-show="showVitualModal" @click.self="closedModal" class="my-modal">
    <article class="modal-content" v-if="companyAuth">
      <i class="iconfont close-icon" @click="closedModal">&#xe84e;</i>
      <div class="c-pt50 c-fs28 c-fc-xblack">温馨提醒</div>
      <div class="c-pt40 c-fs22 c-fc-sblack">微信限制IOS端虚拟支付业务，请联系客服处理</div>
      <!-- 有二维码 -->
      <template v-if="qrCodeImg">
        <img :src="$addXossFilter(qrCodeImg)" class="c-mt30 c-ww260 c-hh260" alt="">
        <div class="c-pt20 theme-fc c-fs20 c-pb10">长按识别二维码，加客服微信</div>
      </template>
      <!-- 无二维码，有客服微信 -->
      <template v-else-if="wechatId">
        <div class="c-pt40 c-fc-black c-fs24 c-pb30">客服微信：{{wechatId}}</div>
        <div @click="clickCopyWechat" class="btn-modal theme-bg-gradient">复制微信号</div>
      </template>
      <!-- 啥都没有，只提示 -->
      <template v-else>
        <div @click="closedModal" class="btn-modal theme-bg-gradient c-mt40">我知道了</div>
      </template>
    </article>
  </div>
</template>

<script>
import { utilJs } from '@/utils/common';
export default {
  components: {},
  props: {
    showVitualModal: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      theme: '',
      qrCodeImg: '',
      wechatId: '',
      companyAuth: null,
    };
  },
  methods: {
    initData() {
      this.theme = localStorage.getItem("colorName") || 'mb5_default';
      this.companyAuth = localStorage.getItem("companyAuth") && JSON.parse(localStorage.getItem("companyAuth"));
      let service = this.companyAuth && this.companyAuth.customerService && this.companyAuth.customerService.service;
      let serviceQrcode = service && service[0].weChatUrl;
      let serviceWeChatId = service && service[0].weChatNumber;
      //因为我们后台现在班主任和客服都不是必填的，所以我们的规则定为：
      //客服二维码>客服微信号>班主任二维码>班主任微信号，再没有就是只有提示语
      if (serviceQrcode) {
        this.qrCodeImg = serviceQrcode;
      }
      if (serviceWeChatId) {
        this.serviceWeChatId = serviceWeChatId;
      }
      //判断是否有班主任信息
    },
    closedModal(e) {
      this.$store.commit('updateShowVitualModal', false);
    },
    async clickCopyWechat() {
     await utilJs.copyText(this.wechatId);
     this.$store.commit('updateShowVitualModal', false);
    },
  },
  mounted() {
    if (!window.navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
      return;
    }
    if (localStorage.getItem("companyAuth")) {
      this.initData();
    } else {
      //防止刚进入页面，share接口数据还没更新，3s后重新获取下缓存数据
      setTimeout(() => {
        this.initData();
      }, 3000);
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.my-modal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10002;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  position: relative;
  width: 13.5rem;
  background-color: #fff;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 1.25rem;
}

.close-icon{
  color: rgba(255,255,255,0.5);
  font-size: 1.1rem;
  position: absolute;
  top: -1.6rem;
  right: 0;
}
.btn-modal{
  width: 5.75rem;
  height: 1.4rem;
  border-radius: 0.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.55rem;
  color: #fff;
}
</style>
